PlayScreenStage = Stage.extend(
		{
			setupDomObject : function(config) {
				this._super(config);
				this.renderUIComposition();
				canvas = document.getElementById(this.CanvasPos.getId());
				canvas.width = 1024;
				canvas.height = 768;
				this.CatchPoint();
//				this.removeAllChild();
//				this.renderUIComposition();
			},
			// catch start point and end point
			CatchPoint : function() {
				Word = new Array();
				Item = new Array();
				itemheight = parseInt(this.itemcol.access().height()
						/ GameData.image.length);
				wordheight = parseInt(this.wordcol.access().height() / GameData.image.length);
				var posStart = 0;
				var posEnd = 0;
				var endX = 0;
				var endY = 0;
				var startX = 0;
				var startY = 0;
				_self = this;
				var checkStart = false;
				var checkMove = false;
				this.CanvasPos.addEventListener('touchstart', function(e) {
					startX = e.originalEvent.touches[0].pageX;
					startY = e.originalEvent.touches[0].pageY;
					checkStart = true;
				});
				this.CanvasPos.addEventListener('touchmove', function(ev) {
					endX = ev.originalEvent.changedTouches[0].pageX;
					endY = ev.originalEvent.changedTouches[0].pageY;
					checkMove = true;
					// console.log('move' + endX + ' ' + endY);
				});
				this.CanvasPos.addEventListener('touchend', function(e) {
					// if click in word first
					if (checkStart == true && checkMove == false) {
						endX = startX;
						endY = startY;
						// console.log('not move' + endX + ' ' + endY);
					}
					// check draw left
					if (startX < _self.wordcol.access().width() && endX > _self.itemcol.access().offset().left) {
						posStart = parseInt(startY / wordheight);
						_self.checkLeft(posStart, startX, startY, posEnd, endX, endY);
					}else if(startX > _self.itemcol.access().offset().left
							&& endX < _self.wordcol.access().width()){
						posStart = parseInt(startY/itemheight);
						_self.checkRight(posStart, startX, startY, posEnd, endX, endY);
					}
					startX = 0;
					startY = 0;
					endX = 0;
					endY = 0;
					posStart = 0;
					posEnd = 0;
					checkMove = false;
					checkStart = false;
				});
			},
			checkLeft : function(posStart, startX, startY, posEnd, endX, endY) {
				posEnd = parseInt(endY / itemheight);
				// check opp point if same
				if (Word.length > 0 && Item.length > 0) {
					// neu vi vi tri posstart da duoc noi
					if (Word[posStart] != null) {
						// neu Word[posstart] khac null thi check diem cuoi
						if (Word[posStart].opp != posEnd) {
							// neu diem goc chua dc noi
							if (Item[posEnd] != null) {
								delete Word[Item[posEnd].opp];
								delete Item[Word[posStart].opp];
								this.reDraw();
								Word[posStart] = {
									opp : posEnd
								}
								Item[posEnd] = {
									opp : posStart
								}
								// ve lai toan bo
								for ( var x in Word) {
									this.join(Item[Word[x].opp].opp,
											Word[x].opp);
								}
							} else {
								this.reDraw();
								Word[posStart] = {
									opp : posEnd
								}
								Item[posEnd] = {
									opp : posStart
								}
								// ve lai toan bo
								for ( var x in Word) {
									this.join(Item[Word[x].opp].opp,
											Word[x].opp);
								}
							}
						}
					}
					// neu vi tri postStart chua duoc noi
					else {
						// check xem diem cuoi da duoc noi chua
						if (Item[posEnd] != null) {
							delete Word[[ Item[posEnd].opp]];
							delete Item[posEnd];
							this.reDraw();
							Word[posStart] = {
								opp : posEnd
							}
							Item[posEnd] = {
								opp : posStart
							}
							// ve lai toan bo
							for ( var x in Word) {
								this.join(Item[Word[x].opp].opp, Word[x].opp);
							}
						} else {
							this.reDraw();
							Word[posStart] = {
								opp : posEnd
							}
							Item[posEnd] = {
								opp : posStart
							}
							// ve lai toan bo
							for ( var x in Word) {
								this.join(Item[Word[x].opp].opp, Word[x].opp);
							}
						}
					}
				} else {
					Word[posStart] = {
						opp : posEnd
					}
					Item[posEnd] = {
						opp : posStart
					}
					this.join(posStart, posEnd);
				}
				// check draw right

			},
			checkRight : function(posStart, startX, startY, posEnd, endX, endY) {
				posEnd = parseInt(endY / itemheight);
				//case 1: both null				
				if(Item[posStart] == null){
					if(Word[posEnd] == null){
						Item[posStart] = {
							opp: posEnd
						};
						Word[posEnd] = {
							opp: posStart
						}
						console.log(posEnd, posStart);
						this.join(posEnd, posStart);
					}
					//case 2: item null, word not null
					else{
						delete Item[Word[posEnd].opp];
						Item[posStart] = {
								opp: posEnd
						}
						Word[posEnd] = {
								opp: posStart
						}
						this.reDraw();
						for (var x in Word){
							this.join(Item[Word[x].opp].opp, Word[x].opp);
						}
					}
				}
				//case 3 item not null, word null
				else{
					if(Word[posEnd] == null){
						delete Word[Item[posStart].opp];
						Item[posStart] = {
								opp: posEnd
						}
						Word[posEnd] = {
								opp: posStart
						}
						this.reDraw();
						for(var x in Word){
							this.join(Item[Word[x].opp].opp, Word[x].opp);
						}
					}else{
						if(Item[posStart].opp != posEnd){
							delete Word[Item[posStart].opp];
							delete Item[Word[posEnd].opp];
							this.reDraw();
							Item[posStart] = {
									opp: posEnd
							}
							Word[posEnd] = {
									opp: posStart
							}
							for(var x in Word){
								this.join(Item[Word[x].opp].opp, Word[x].opp);
							}
						}
					}
				}
				
				// if(Item[posStart]){

				// }
			},
			reDraw : function() {
				var ctx = canvas.getContext('2d');
				ctx.clearRect(0, 0, 1024, 768);
			},
			join : function(start, end) {
				var ctx = canvas.getContext('2d');
				var yfrom = this['dot' + start].access().offset().top + 15;
				var xfrom = this['dot' + start].access().offset().left + 15;
				var yTo = this['dotItem' + end].access().offset().top + 15;
				var xTo = this['dotItem' + end].access().offset().left + 15;
				ctx.lineWidth = 3;
				ctx.strokeStyle = "#333";
				ctx.beginPath();
				ctx.moveTo(xfrom, yfrom);
				ctx.bezierCurveTo((xfrom + xTo) / 2, yfrom + 10,
						(xfrom + xTo) / 2, yTo - 10, xTo, yTo);
				// ctx.lineTo(xTo,yTo);
				ctx.stroke();
				ctx.closePath();
			}
		}).implement(CompositionRenderInterface);
